<template>
  <div class="wrapper">
    <div v-for="item of result" :key="item.positionId">
      <div class="head">
        <div class="logo">
          <img width="80px" height="80px" :src="'//www.lgstatic.com/'+item.companyLogo" alt />
        </div>
        <div class="middle">
          <h2>{{item.companyName}}</h2>
          <div class="position">
            {{item.positionName}}
            <span>{{item.salary}}</span>
          </div>
          <div class="time">{{item.createTime}}</div>
        </div>
      </div>
    </div>
    <button @click="handleClick(pageNo+1)">加载更多</button>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      result: [],
      pageNo: 1
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(pageNo = 2) {
      this.pageNo = pageNo;
      this.$axios
        .get("/lagou/listmore.json", {
          params: {
            pageNo,
            pageSize: 15
          }
        })
        .then(({ data }) => {
          this.result = [...this.result, ...data.content.data.page.result];
          // console.log(data.content.data.page.result);
        });
    }
  },
  created() {},
  mounted() {
    this.$axios
      .get("/lagou/listmore.json", {
        params: {
          pageNo: 1,
          pageSize: 15
        }
      })
      .then(({ data }) => {
        this.result = data.content.data.page.result;
        // console.log(data.content.data.page.result);
      });
  }
};
</script>
<style lang="css" scoped>
.head {
  height: 103px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.logo {
  float: left;
}
.middle {
  height: 100px;
  margin-left: 100px;
  margin-top: 10px;
}
.middle h2 {
  font-weight: 700;
  font-size: 20px;
}
.position {
  margin-top: 5px;
}
.position span {
  float: right;
  margin-left: 60px;
  font-size: 18px;
  color: #00b38a;
  margin-right: 10px;
}
.time {
  margin-top: 5px;
}
button {
  position: relative;
  width: 100%;
  height: 30px;
}
</style>